<script setup>
import { ref, onMounted, onUnmounted, watch } from "vue"
import "echarts"
import VChart from "vue-echarts"

// 接收父组件传值
const props = defineProps({
    width: {
        type: String,
        default: "100%",
    },
    height: {
        type: String,
        default: "200px",
    },
    options: Object,
})

const curOptions = ref({})
curOptions.value = {
    title: {
        text: "~暂无图表数据~",
        x: "center",
        y: "center",
        textStyle: {
            fontSize: 14,
            fontWeight: "normal",
            color: "#999"
        }
    },
    tooltip: {
        trigger: "axis",
    },
    legend: {},
    grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
    },
    xAxis: {
        type: "category",
        boundaryGap: false, // 为柱状图时设成true，两端留空
        data: [],
    },
    yAxis: {
        type: "value",
    },
    series: [],
}

const echartsRef = ref(null)

// 窗口大小改变事件
const handleResize = () => {
    // console.log(echartsRef.value)
    echartsRef.value.resize()
}

onMounted(() => {
    window.addEventListener("resize", handleResize)
})

onUnmounted(() => {
    window.removeEventListener("resize", handleResize)
})

watch(() => props.options, (val) => {
    if (val && val.series && val.series.length > 0) {
        curOptions.value = val
    }
}, {
    immediate: true,
    deep: true
})
</script>

<template>
    <div class="comp-echarts-index">
        <v-chart
            ref="echartsRef"
            :style="{ width, height }"
            :option="curOptions"
        ></v-chart>
    </div>
</template>

<style lang="scss" scoped></style>